<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/main}">
<head>
    <title th:text="'销售记录 - ' + ${product.name}">商品销售记录</title>
</head>
<body>
    <div layout:fragment="title" th:text="'销售记录 - ' + ${product.name}">商品销售记录</div>
    
    <div layout:fragment="content">
        <!-- 商品信息卡片 -->
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">商品信息</h6>
                <div>
                    <a th:href="@{'/products/detail/' + ${product.id}}" class="btn btn-sm btn-info">
                        <i class="bi bi-eye"></i> 查看商品详情
                    </a>
                    <a th:href="@{'/sales/add?productId=' + ${product.id}}" class="btn btn-sm btn-warning"
                       th:disabled="${product.quantity == 0}">
                        <i class="bi bi-cart-check"></i> 新增销售
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-borderless">
                            <tr>
                                <th style="width: 30%">商品名称:</th>
                                <td th:text="${product.name}">商品名称</td>
                            </tr>
                            <tr>
                                <th>商品分类:</th>
                                <td th:text="${product.category ?: '未分类'}">分类</td>
                            </tr>
                            <tr>
                                <th>商品条码:</th>
                                <td th:text="${product.barcode ?: '无'}">条码</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-borderless">
                            <tr>
                                <th style="width: 30%">当前库存:</th>
                                <td>
                                    <span th:text="${product.quantity + ' ' + product.unit}"
                                          th:class="${product.quantity < 10 ? 'text-danger fw-bold' : ''}">
                                        10 个
                                    </span>
                                    <span th:if="${product.quantity == 0}" class="badge bg-danger ms-2">无库存</span>
                                </td>
                            </tr>
                            <tr>
                                <th>销售价格:</th>
                                <td th:text="${#numbers.formatDecimal(product.sellingPrice, 1, 2) + ' 元'}">20.00 元</td>
                            </tr>
                            <tr>
                                <th>进货价格:</th>
                                <td th:text="${#numbers.formatDecimal(product.purchasePrice, 1, 2) + ' 元'}">10.00 元</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 销售历史表格 -->
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">销售历史记录</h6>
                <a th:href="@{/sales}" class="btn btn-sm btn-secondary">
                    <i class="bi bi-arrow-left"></i> 返回所有销售记录
                </a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="salesTable" width="100%" cellspacing="0">
                        <thead class="table-dark">
                            <tr>
                                <th>ID</th>
                                <th>数量</th>
                                <th>单价(元)</th>
                                <th>总价(元)</th>
                                <th>利润(元)</th>
                                <th>客户</th>
                                <th>支付方式</th>
                                <th>销售日期</th>
                                <th>操作员</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:if="${#lists.isEmpty(sales)}">
                                <td colspan="10" class="text-center">暂无销售记录</td>
                            </tr>
                            <tr th:each="sale : ${sales}">
                                <td th:text="${sale.id}">1</td>
                                <td th:text="${sale.quantity + ' ' + product.unit}">10 个</td>
                                <td th:text="${#numbers.formatDecimal(sale.price, 1, 2)}">20.00</td>
                                <td th:text="${#numbers.formatDecimal(sale.totalAmount, 1, 2)}">200.00</td>
                                <td>
                                    <span th:text="${#numbers.formatDecimal(sale.profit, 1, 2)}"
                                          th:class="${sale.profit > 0 ? 'text-success' : 'text-danger'}">
                                        50.00
                                    </span>
                                </td>
                                <td th:text="${sale.customer ?: '-'}">客户</td>
                                <td th:text="${sale.paymentType}">现金</td>
                                <td th:text="${#temporals.format(sale.saleDate, 'yyyy-MM-dd HH:mm')}">2023-01-01 12:00</td>
                                <td th:text="${sale.user.username}">操作员</td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a th:href="@{'/sales/detail/' + ${sale.id}}" class="btn btn-info" title="详情">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        <button class="btn btn-danger" title="删除" 
                                               th:attr="onclick='confirmDelete(\'' + ${sale.id} + '\',\'' + ${product.name} + '\',\'' + ${sale.quantity} + '\')'">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 统计信息 -->
                <div class="row mt-4" th:if="${!#lists.isEmpty(sales)}">
                    <div class="col-md-4">
                        <div class="card border-left-primary shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">总销售数量</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" th:with="totalQuantity=${sales.stream().mapToInt(s -> s.quantity).sum()}">
                                            <span th:text="${totalQuantity + ' ' + product.unit}">100 个</span>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="bi bi-box fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-left-success shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">总销售金额</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" th:with="totalAmount=${sales.stream().mapToDouble(s -> s.totalAmount.doubleValue()).sum()}">
                                            <span th:text="${#numbers.formatDecimal(totalAmount, 1, 2) + ' 元'}">2000.00 元</span>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="bi bi-cash-stack fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-left-info shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">总利润</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" th:with="totalProfit=${sales.stream().mapToDouble(s -> s.profit.doubleValue()).sum()}"
                                             th:classappend="${totalProfit < 0 ? 'text-danger' : 'text-success'}">
                                            <span th:text="${#numbers.formatDecimal(totalProfit, 1, 2) + ' 元'}">500.00 元</span>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="bi bi-graph-up-arrow fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 删除确认模态框 -->
        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>您确定要删除该销售记录吗？</p>
                        <p>商品：<span id="productName"></span></p>
                        <p>数量：<span id="quantity"></span></p>
                        <div class="alert alert-warning" role="alert">
                            <i class="bi bi-exclamation-triangle-fill"></i> 注意：删除此记录将会增加相应商品的库存数量！此操作无法撤销。
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <a href="#" id="confirmDeleteBtn" class="btn btn-danger">确认删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div layout:fragment="page_scripts">
        <script>
            function confirmDelete(id, productName, quantity) {
                document.getElementById('productName').textContent = productName;
                document.getElementById('quantity').textContent = quantity;
                document.getElementById('confirmDeleteBtn').href = '/inventory/sales/delete/' + id;
                var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
                deleteModal.show();
            }
        </script>
    </div>
</body>
</html> 